<template>
    <div class="role_access_rule_container">
        <el-form ref="roleDataAccessRuleFrom" :model="formData" label-width="100px">
            <el-form-item label="角色名称" prop="role_name" class="main_table_1">
                <el-input v-model="formData.name" style="width: 100%" disabled />
            </el-form-item>
            <el-form-item label="用户绑定" prop="user_sid_list" class="main_table_2">
                <el-select value-field-name="id" multiple v-model="formData.user_sid_list"
                           style="width: 100%" disabled>
                    <el-option v-for="(item, index) in userList" :key="index"
                               :label="item.name" :value="item.sid" />
                </el-select>
            </el-form-item>
            <el-form-item label="数据访问规则">
                <vxe-table-template :data="accessRuleList" :options.sync="tableOptions" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "RoleAccessRule",
    props: {
        propsData: {
            type: Object,
            default() {
                return {
                    init: true,
                };
            },
        },
    },
    data() {
        const _this = this;
        return {
            userList: [],
            formData: {},
            accessRuleList: [],
            tableOptions: {
                ref: 'roleAccessRuleTable',
                pagination: false,
                rowKey: 'unionKey',
                hideIndex: true,
                columns: [
                    {
                        label: '序号',
                        prop: 'no',
                        width: 60,
                        align: 'center',
                    },
                    {
                        label: '数据对象名称',
                        prop: 'name',
                        width: 150,
                        align: 'center',
                    },
                    {
                        label: '勾选',
                        prop: 'check_data_rule',
                        width: 60,
                        align: 'center',
                        render(h, { row, column }) {
                            return h("el-checkbox", {
                                props: {
                                    value: row[column.prop] === true,
                                },
                                on: {
                                    change(value) {
                                        _this.accessRuleList.forEach((item, index) => {
                                            if (row.access_rule_sid === item.access_rule_sid && value === true) {
                                                _this.accessRuleList[index].check_data_rule = true;
                                            } else if (row.obj_sid === item.obj_sid) {
                                                _this.accessRuleList[index].check_data_rule = false;
                                            }
                                        });
                                    },
                                },
                            });
                        },
                    },
                    {
                        label: '数据对象规则编码',
                        prop: 'access_rule_code',
                        align: 'center',
                    },
                    {
                        label: '数据对象规则名称',
                        prop: 'access_rule_name',
                        align: 'center',
                    },
                ],
                getMaxHeight() {
                    let height = $(_this.getActiveTabsContainer()).height() * 0.8 - 100;
                    let mainTableHeight1 = $(_this.$el).find('.main_table_1').outerHeight();
                    let mainTableHeight2 = $(_this.$el).find('.main_table_2').outerHeight();
                    return height - mainTableHeight1 - mainTableHeight2;
                },
            },
        };
    },
    watch: {
        propsData: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            const _this = this;
            if (_this.propsData.init) {
                return;
            }
            _this.initUserList();
            _this.initAccessRuleList();
            if (_this.$refs.roleDataAccessRuleFrom) {
                _this.$refs.roleDataAccessRuleFrom.clearValidate();
            }
            _this.formData = $.extend({}, _this.propsData.row);
            if (_this.$utils.isNotEmpty(_this.formData.user_sid)) {
                let user_sid_list = [];
                if (_this.formData.user_sid.indexOf(',') > 0) {
                    user_sid_list = _this.formData.user_sid.split(',');
                } else {
                    user_sid_list.push(_this.formData.user_sid)
                }
                _this.formData = $.extend({}, _this.formData, { user_sid_list });
            }
        },
        initUserList() {
            const _this = this;
            return _this.fetchData(_this.$api.API_FindSysUsers, {
                nopage: '1',
            }).then(result => {
                _this.userList = result.data || [];
            }).catch(() => {
            });
        },
        initAccessRuleList() {
            const _this = this;
            return _this.fetchData(_this.$api.API_FindSysDataObjAccessRuleList).then(result => {
                _this.accessRuleList = _this.resetDataList(result.data, _this.formData);
            }).catch(() => {
            });
        },
        resetDataList(result, row) {
            const _this = this;
            let list = [];
            if (_this.$utils.isNotEmptyList(result)) {
                let spanField = [ '_section', 'no', 'name' ];
                let no = 1;
                result.forEach((item, index) => {
                    if (_this.$utils.isNotEmptyList(item.data_obj_access_rule_list)) {
                        item.data_obj_access_rule_list.forEach((child, cIndex) => {
                            let obj = $.extend({}, item);
                            obj.no = no;
                            obj.unionKey = `${ item.id }_${ child.access_rule_id }`;
                            obj.role_sid = _this.formData.sid;
                            obj.obj_sid = child.obj_sid;
                            obj.access_rule_sid = child.access_rule_sid;
                            obj.access_rule_name = child.access_rule_name;
                            obj.access_rule_code = child.access_rule_code;
                            if (_this.$utils.isNotEmptyList(row.access_rule_list)) {
                                obj.check_data_rule = false;
                                row.access_rule_list.forEach(ruleObj => {
                                    obj.check_data_rule = ruleObj === child.access_rule_sid;
                                });
                            } else {
                                obj.check_data_rule = false;
                            }
                            if (cIndex === 0) {
                                obj.spanOption = {};
                                spanField.forEach(field => {
                                    obj.spanOption[field] = {
                                        rowspan: item.data_obj_access_rule_list.length,
                                        colspan: 1,
                                    };
                                });
                            } else {
                                obj.spanOption = {
                                    hideField: spanField,
                                };
                            }
                            list.push(obj);
                            no += 1;
                        });
                    } else {
                        let obj = $.extend({}, item);
                        obj.unionKey = `${ item.id }`;
                        list.push(obj);
                    }
                });
            }
            return list;
        },
        async confirm() {
            const _this = this;
            let valid = await _this.validateForm('roleDataAccessRuleFrom');
            if (valid) {
                let filter = _this.accessRuleList.filter(m => m.check_data_rule === true);
                let dataList = filter.map(item => {
                    return {
                        role_sid: item.role_sid,
                        data_obj_sid: item.obj_sid,
                        access_rule_sid: item.access_rule_sid,
                    };
                });
                return _this.fetchData(_this.$api.API_SaveSysRoleDataAccessRule, {
                    dataList,
                }).then(() => {
                    _this.$message.success('保存成功！');
                    return true;
                }).catch(() => {
                    return false;
                });
            }
            return valid;
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.role_access_rule_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
